<template>
    <div class="citys" ref="left">
        <section>
            <div class="city-title" id="locate">定位城市</div>
            <div class="city-list city-list-inline clearfix">
                <div class="location-city">
                    <!-- 定位失败，请稍后重试 -->
                    广州
                </div>
            </div>
        </section>
        <section class="history-city-list">
            <div class="city-title" id="history">最近访问城市</div>
            <div class="city-list city-list-inline clearfix">
                <div class="city-item" v-for="(item,index) in hsCitys.slice(0,3)" :key="index" @click="selectHs(item.id,item.name)">{{item.name}}</div>
            </div>
        </section>
        <section>
            <div class="city-title" id="hot">热门城市</div>
            <div class="city-list city-list-inline clearfix">
                <div class="city-item" v-for="(item,index) in HotCity" :key="index" @click="checkHot(item)">{{item}}</div>
            </div>
        </section>
        <section>
            <div  v-for="(item,index) in Citylists" :key="index">
            <div :id="item.letter" class="city-title city-title-letter">{{item.letter}}</div>
            <div class="city-list city-list-block clearfix">
                <div class="city-item" v-for="(c,i) in item.citys" :key="i" @click="selectCity(c.id,c.nm)">{{c.nm}}</div>
            </div>
            </div>
        </section>
        <section class="nav">
            <a href="#locate" class="nav-item" >定位</a>
            <a href="#history" class="nav-item" >最近</a>
            <a href="#hot" class="nav-item">热门</a>
            <a :href="'#'+item.letter" class="nav-letter nav-item"  v-for="(item,index) in Citylists" :key="index">{{item.letter}}</a>
        </section>
    </div>
</template>

<script>
import {getCitysLists} from '../api/home.js'
    export default {
        data() {
            return {
                Citylists:null,//城市列表
                HotCity:null,//热门城市
                str:'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                allCitys:null,
                hsCitys:[],//最近访问
            };
        },
        methods: {
            // 获取城市列表数据
            getCitysFun(){
                getCitysLists().then(data=>{
                    this.allCitys=data.cts
                    this.HotCity = data.hot
                    this.parseCity(data.cts)
                })
            },
            //整理城市数据
            parseCity(arr) {
                let newStr = this.str.split("")
                let cityArr = []
                let newCity = []
                for (let i = 0; i < newStr.length; i++) {
                    cityArr.push({
                        letter: newStr[i],
                        citys: []
                    })

                }
                for (let i = 0; i < arr.length; i++) {
                    for (var j = 0; j < cityArr.length; j++) {
                        if (arr[i].py[0].toUpperCase() == cityArr[j].letter) {
                            cityArr[j].citys.push(arr[i])
                        }
                    }
                }
                cityArr.forEach(function (item) {
                    if (item.citys.length != 0) {
                        newCity.push(item)
                    }
                })
                this.Citylists = newCity
                return newCity;
            },
            //最近访问
            selectHs(id,name){
                if (this.hsCitys.length) {
                    let index = this.hsCitys.findIndex(item=>item.id==id)
                    if (index==-1) {
                        this.hsCitys.push({id,name})
                         window.localStorage.setItem('hsCitys',JSON.stringify(this.hsCitys))                      
                    }
                }
                // if (this.hsCitys.length>3) {
                //     window.localStorage.removeItem('hsCitys')
                // }else{
                    
                //     window.localStorage.setItem('hsCitys',JSON.stringify(this.hsCitys))
                // }
                this.$router.push({path:"/home",query:{id,name}})
            },
            // 热门城市
            checkHot(name){
                this.Citylists.forEach(item=>{
                    let index = item.citys.findIndex(c=>c.nm==name)
                    if (item.citys[index]!=undefined) {
                         this.$router.push({path:"/home",query:{id:item.citys[index].id,name}})                    
                    }
                })
            },
            //选择城市
            selectCity(id,name){
                 if (this.hsCitys.length) {
                    let index = this.hsCitys.findIndex(item=>item.id==id)
                    if (index==-1) {
                        this.hsCitys.push({id,name})
                         window.localStorage.setItem('hsCitys',JSON.stringify(this.hsCitys))                      
                    }
                }
                this.$router.push({path:"/home",query:{id,name}})
            },

           
        },
        created() {
            this.getCitysFun()
            let temp = JSON.parse(window.localStorage.getItem("hsCitys"))
            this.hsCitys = temp==null?[]:temp.reverse()
        },
    }
</script>

<style lang="less" scoped>
.citys{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 999;
    background-color: #ebebeb;
    font-size: 14px;
    overflow-y: scroll;

    .city-list-inline{
        background-color: #f5f5f5;
        padding-bottom: 8px;

        .location-city{
            width: auto;
            min-width: 30%;
            padding: 0 20px;
        }
    }
    .nav{
        position: fixed;
        top: 75px;
        top: 11vh;
        right: 0;
        width: 35px;
        z-index: 10;
        text-align: center;
        font-size: 12px;

        .nav-item{
            display: block;
            height: 2.8vh;
        }
        .nav-letter{
            width: 15px;
            margin-left: 15px;
        }
    }
    &::-webkit-scrollbar {
        display: none;
      }
}
</style>